<template>
  <el-row :gutter="40">
    <el-col :lg="24">
      <el-form :inline="true" :model="queryParams" label-position="right" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="8">
            <el-form-item label="创建时间" style="width: 100%">
              <date-range-picker v-model:date="queryParams.date" style="width: 100%" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="handlDate" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item label="企业所在地" style="width: 100%">
              <el-cascader v-model="queryParams.value" :popper-append-to-body="false" style="width:100%" clearable
                placeholder="请选择地区" :options="citys"
                :props="{ value:'regionCode',label:'regionName',expandTrigger: 'hover' }" @change="handlAreas" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item label="关键字" style="width: 100%">
              <el-input v-model="queryParams.keyWord" clearable placeholder="输入名称、编号、统一社会代码、所在地区、详细地址" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置
              </el-button>
              <el-button type="primary" class="main-btn" @click="handlSearch">搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
  <table-view :data="tableData" header-cell-class-name="table-header" size="medium" border :cell-style="cellStyle"
    @sort-change="handlSort" @row-click="aloneClick">
    <el-table-column prop="agentNumber" label="代理商编号" header-align="center" :show-overflow-tooltip="true" min-width="120"/>
    <el-table-column prop="agentName" label="代理商名称" header-align="center" :show-overflow-tooltip="true" min-width="150"/>
    <el-table-column prop="creditCode" label="统一社会信用代码" align="center" :show-overflow-tooltip="true" width="140"/>
    <el-table-column prop="region" label="企业所在地区" align="center" :show-overflow-tooltip="true" min-width="150">
      <template #default="{row}">
        {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="详细地址" align="center" :show-overflow-tooltip="true" width="120"/>
    <el-table-column prop="createdAt" label="创建时间" sortable="custom" align="center" :show-overflow-tooltip="true" width="120">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM", row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column prop="terminalStatus" label="状态" align="center" :show-overflow-tooltip="true" width="100">
      <template #default="{row}">
        {{ getLabel('agent_status', row?.agentStatus) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" min-width="100">
      <template #default="{row}">
        <el-button type="text" v-auth="{v:['crm:baseInfo:agent:potentialAgent:change']}" @click="handlChange(row)">变更信息
        </el-button>
      </template>
    </el-table-column>
  </table-view>
  <Pagination v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
    style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />
</template>

<script>
import {inject, onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";
import areas from "@/utils/area.js";

export default {
  name: "AgentList",
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    var data = reactive({
      queryParams: {
        keyWord: "",
        pageSize: 20,
        page: 1,
        date: [],
        startTime: null,
        endTime: null,
        value: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        from: "1",
        agentType: "agent",
      },
      citys: areas,
      tableData: [],
      total: 0,
      agentDialog: null,
      formSign: null,
      typeTitle: "",
    });

    const handlDate = (val) => {
      data.queryParams.startTime = val[0];
      data.queryParams.endTime = val[1];
    };

    const handlAreas = (val) => {
      if (val) {
        data.queryParams.provinceCode = val[0];
        data.queryParams.cityCode = val[1];
        data.queryParams.areaCode = val[2];
      }
    };

    // 获取列表
    const handlList = () => {
      api.channelAgent.POTENTIALAGENT_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    const handlReset = () => {
      data.queryParams = {
        keyWord: "",
        pageSize: 20,
        page: 1,
        date: [],
        startTime: null,
        endTime: null,
        value: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        from: "1",
        agentType: "agent",
      };
      handlList();
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        path: "/baseInfo/customer/baseInfoAgent/baseInfoAgentPotential",
        query: { id: row.id, type: "agent" },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 变更
    const handlChange = (row) => {
      router.push({
        path: "/baseInfo/customer/baseInfoAgent/createAgent",
        query: { id: row.id, type: "agent" },
      });
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "创建时间") {
          switch (row.order) {
            case "ascending":
              data.queryParams.createdSort = "asc";
              break;
            case "descending":
              data.queryParams.createdSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    //* **************************************
    onMounted((_) => {
      handlList();
    });
    //* **************************************
    return {
      ...toRefs(data),
      handlReset,
      handlSearch,
      aloneClick,
      cellStyle,
      handlChange,
      handlList,
      handlSort,
      handlAreas,
      handlDate,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
